<template>
  <div class="base_card_bottom">
    <span
      v-if="leftText && rightText"
      :class="leftDanger ? 'mid_line danger' : 'mid_line'"
      @click="leftClick"
      >{{ leftText }}</span>
    <span
      v-if="leftText && rightText"
      :class="rightDanger ? 'danger' : ''"
      @click="rightClick"
      >{{ rightText }}</span>
    <span
      v-if="bottomText"
      :class="bottomDanger ? 'danger' : ''"
      @click="bottomClick"
      >{{ bottomText }}</span>
  </div>
</template>

<script>
export default {
  name: 'baseCard',
  props: {
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    bottomText: {
      type: String,
      default: ''
    },
    leftDanger: {
      type: Boolean,
      default: false
    },
    rightDanger: {
      type: Boolean,
      default: false
    },
    bottomDanger: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCollapse: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    leftClick() {
      this.$emit('leftClick')
    },
    rightClick() {
      this.$emit('rightClick')
    },
    bottomClick() {
      this.$emit('bottomClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.base_card_bottom {
  text-align: center;
  border-width: 0.5px 0 0 0;
  border-style: solid;
  border-color: #ebebeb;
  width: 100%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: #fff;
  display: flex;

  span {
    display: block;
    flex: 1;
    font-family: PingFang SC Regular;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    color: #2163e0;

    &.danger {
      color: #ff5454;
    }

    &.mid_line {
      border-width: 0 0.5px 0 0;
      border-style: solid;
      border-color: #ebebeb;
    }
  }
}
</style>
